import React, {Component} from 'react';
import PropTypes from 'prop-types'
import MessageHandle from './MessageHandle'

import './ChatDisplay.css'
class ChatDisplay extends Component {

    static propType = {
        chatState:PropTypes.object.isRequired
    }

    render = ()=>{
        const {chatState} = this.props
        let messages = [
            {
                id:0,
                fromWho:true,
                text:"程兴国老师最帅了!"
            },
            {
                id:1,
                fromWho:true,
                text:"我好喜欢他!"
            },
            {
                id:2,
                fromWho:false,
                text:"我也是!"
            }
        ]
        console.log("height" + window.screen.availHeight )
        return(
            <div className = "chat-display" style = {{maxHeight:window.screen.availHeight-90 }}>
            <div>
                {
                    messages.map(message =>{
                        if(message)
                        return <MessageHandle key = {message.id} message = {message}/>
                    })
                }
            </div>
            <div id="msg_end" style={{height:"0", overflow:"hidden"}}></div>
            </div>
        )
    }
}

export default ChatDisplay